<template>
  <div class="entrance">
    <!-- 单篇文章 -->
    <div class="list" v-for="(item,index) in articles" v-if="articles">
      <router-link :to="{path:'/post/'+item.articleId}" target="_blank">
        <div class="box_wrapper">
          <div class="head_wrapper">
            <!-- 文章标题 -->
            <div class="article_title">
              <router-link :to="{path:'/post/'+item.articleId}" target="_blank">{{item.title}}</router-link>
            </div>
            <!-- 作者信息 -->
            <div class="article_info">
              <span>
                <router-link
                  :to="{path:'/user/'+item.userInfo.uid}"
                  target="_blank"
                >{{item.userInfo.username}}</router-link>
              </span>
              <span class="dot">·</span>
              <!-- <span>{{item.articlePostTime}}</span> -->
              <span>{{item.articlePostTime | timeAgo}}</span>
            </div>
          </div>
          <div class="content_wrapper">
            <div class="summary_wrapper">
              <!-- 文章摘要 -->
              <div class="article_summary">
                <router-link
                  :to="{path:'/post/'+item.articleId}"
                  target="_blank"
                  v-html="item.articleSummaryInfo"
                />
              </div>
              <!-- 文章操作 -->
              <div class="article_option">
                <ul class="option_wrapper">
                  <!-- actived激活类 -->
                  <li
                    class="likes"
                    :class=" {actived:!!item.islike}"
                    @click.prevent="changeIsLike(item.islike,item.articleId,index)"
                  >
                    <i class="iconfont icon-like-active-"></i>
                    <span>{{item.articleLikes}}</span>
                  </li>
                  <li class="comments">
                    <i class="iconfont icon-pinglun"></i>
                    <span>{{item.articleComments}}</span>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 文章封面大图 -->
            <div class="article_img" v-if="item.screenShot">
              <img :src="item.screenShot" alt />
            </div>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "entrypage",
  components: {},
  data() {
    return {
      currentsize: 0,
      articles: [],
      // 没有数据了
      isEnd: false,
      // 防抖节流
      loading: false
    };
  },
  props: {
    categoryid: {}
  },

  watch: {
    categoryid: {
      handler: function(newV, oldV) {
        this.initData(newV);
      }
    }
  },

  computed: {
    formatdata(time) {
      return this.$moment(time).format("lll");
    }
  },

  methods: {
    // 初始化data
    async initData() {
      await Object.assign(this.$data, this.$options.data());
      this.getArticlesByCategoryId(true);
    },

    //根据分类id获取文章列表
    getArticlesByCategoryId(isclear) {
      if (!this.loading) {
        let uid = this.$store.state.user.uid;
         this.$axios
          .get("/getLists", {
            params: {
              categoryid: this.categoryid,
              currentsize: this.currentsize,
              size: 10,
              uid: uid
            }
          })
          .then(res => {
            this.loading = false;

            if (isclear) {
              this.currentsize = res.data.data.length;
              this.articles = res.data.data;
            } else {
              this.currentsize += res.data.data.length;
              this.articles = this.articles.concat(res.data.data);
            }

            if (res.data.data.length < 10) {
              this.isEnd = true;
            } else {
              this.isEnd = false;
            }
          })
          .catch(err => {
            this.loading = false;
            console.log(err.response);
          });
      } else {
        return;
      }
    },

    //鼠标滚动异步请求数据
    scroll() {
      window.onscroll = () => {
        // 距离底部200px时加载一次
        let bottomOfWindow =
          document.documentElement.offsetHeight -
            document.documentElement.scrollTop -
            window.innerHeight <=
          100;
        if (bottomOfWindow && this.loading == false) {
          this.loading = true;
          if (!this.isEnd) {
            this.loading = false;
            this.getArticlesByCategoryId(false);
          } else {
            this.loading = false;
          }
        }
      };
    },

    //点赞或取消点赞
    changeIsLike(islike, articleid, index) {
      if (!this.loading) {
        //点赞或取消点赞前先判断用户是否登录
        let isLogin = this.$store.state.isAuthenticated;
        let uid = this.$store.state.user.uid;
        // 若未登录则要求登录
        if (isLogin) {
          let action;
          if (!!islike) {
            action = "/unlike";
          } else {
            action = "/like";
          }
        this.$axios
            .get(action, {
              params: {
                uid: uid,
                articleid: articleid
              }
            })
            .then(res => {
              // 取消点赞图标激活类
              this.articles[index].islike = !this.articles[index].islike;
              // 点赞数+1/-1
              if (!islike) {
                this.articles[index].articleLikes =
                  this.articles[index].articleLikes + 1;
              } else {
                this.articles[index].articleLikes =
                  this.articles[index].articleLikes - 1;
              }
              this.loading = false;
            })
            .catch(err => {
              this.$Message.error({
                background: true,
                content: "操作失败",
                duration: 2.5
              });
            });
        } else {
          // 弹出登录框
          this.$store.dispatch("setIsToLogin", true);
        }
      } else {
        return;
      }
    }
  },
  mounted() {
    this.initData();
    this.scroll();
  },
  destroyed() {
    window.removeEventListener("scroll", this.scroll);
  }
};
</script>

<style lang='scss'>
.entrance {
  .list {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    a {
      color: #000;
    }
    .box_wrapper {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18px 18px;
      .head_wrapper {
        color: #b2bac2;
        .article_title {
          color: #000;
          font-size: 20px;
          font-weight: 600;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          a:hover {
            text-decoration: underline;
          }
        }
        .article_info {
          margin-top: 5px;
          .dot {
            padding: 0 5px;
          }
          a {
            color: inherit;
          }
          a:hover {
            color: #007fff;
          }
        }
      }
      .content_wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 5px;
        .summary_wrapper {
          flex: 1;
          display: flex;
          flex-direction: column;
          width: 100%;
          align-content: space-between;
          .article_summary {
            flex: 1;
          }
          .article_option {
            margin-top: 10px;
            .option_wrapper {
              display: inline-block;
              border: 0.5px solid #e3e3e3;
              .actived {
                color: #19be6b;
              }
              li {
                float: left;
                padding: 0 10px;
                color: #909090;
                height: 30px;
                line-height: 30px;
                i {
                  font-size: 15px;
                }
                span {
                  font-size: 0.9rem;
                  font-weight: 700;
                  padding-left: 5px;
                }
              }
              li:nth-child(1) {
                border-right: 0.5px solid #e3e3e3;
              }
            }
          }
        }
        .article_img {
          margin-left: 25px;
          height: 60px;
          width: 60px;
          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
}
</style>